<template>
  <div class="government-dashboard">
    <el-main class="dashboard-main">
      <!-- 快速访问区域 -->
      <el-row :gutter="20" class="quick-access">
        <el-col
          :xs="12"
          :sm="8"
          :md="4"
          v-for="(item) in filteredQuickItems"
          :key="item.id"
        >
          <el-card
            class="quick-item"
            :body-style="{ padding: '25px 15px', textAlign: 'center' }"
            shadow="hover"
            @click.native="handleQuickClick(item.title)"
          >
            <div class="quick-item-content">
              <img :src="getImageUrl(item.icon)" class="quick-icon" />
              <h3>{{ item.title }}</h3>
              <p>{{ item.description }}</p>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 统计卡片区域 -->
      <el-row :gutter="20" class="stats-container">
        <el-col :xs="12" :sm="6" v-for="stat in statsData" :key="stat.id">
          <el-card class="stat-card" shadow="hover">
            <div class="stat-content">
              <i :class="stat.icon" class="stat-icon-bg"></i>
              <h3>{{ stat.title }}</h3>
              <div class="stat-value">{{ stat.value }}</div>
              <!-- <div :class="['stat-change', stat.trend]">
                <i :class="stat.trendIcon"></i>
                {{ stat.change }} 较上周
              </div> -->
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 图表区域 -->
      <el-row :gutter="20" class="dashboard-section">
        <el-col :xs="24" :lg="16">
          <el-card class="chart-card">
            <template #header>
              <div class="chart-header">
                <i class="el-icon-data-line"></i>
                <span>数据趋势分析</span>
              </div>
            </template>
            <div class="chart-container">
              <line-chart
                :chartData="numberLineData"
                :height="chartHeight"
                v-if="numberLineData"
              />
              <div v-else class="chart-loading">
                <i class="el-icon-loading"></i>
                <div>数据加载中...</div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :lg="8">
          <el-card class="chart-card">
            <template #header>
              <div class="chart-header">
                <i class="el-icon-pie-chart"></i>
                <span>平台数据占比</span>
              </div>
            </template>
            <div class="chart-container">
              <age-pie-chart
                :chartData="agePieData"
                :height="chartHeight"
                v-if="agePieData"
              />
              <div v-else class="chart-loading">
                <i class="el-icon-loading"></i>
                <div>数据加载中...</div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 数据表格区域 -->
      <el-card class="data-table">
        <template #header>
          <div class="table-header">
            <i class="el-icon-s-grid"></i>
            <span>近期操作列表</span>
          </div>
        </template>
        <el-table
          :data="tableData"
          style="width: 100%"
          :header-cell-style="{
            background: '#f8f9fa',
            color: '#555',
            fontWeight: '500',
          }"
          stripe
        >
          <el-table-column
            type="index"
            width="80"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="fileName"
            label="文件名称"
            min-width="180"
          ></el-table-column>
          <el-table-column
            prop="operate"
            label="操作"
            min-width="120"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="createTime"
            label="操作时间"
            min-width="160"
            align="center"
          ></el-table-column>
          <!-- <el-table-column
            prop="status"
            label="状态"
            width="100"
            align="center"
          >
            <template slot-scope="scope">
              <el-tag
                :type="getStatusType(scope.row.status)"
                size="small"
                effect="light"
              >
                {{ scope.row.status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="80" align="center">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="handleView(scope.row)"
              >
                查看
              </el-button>
            </template>
          </el-table-column> -->
        </el-table>
      </el-card>
    </el-main>
  </div>
</template>

<script>
import { homePage, dataStatisticsSummary } from "@/api/index/index";
import LineChart from "./dashboard/LineChart";
import PieChart from "./dashboard/PieChart";
import agePieChart from "./dashboard/agePieChart.vue";

export default {
  name: "GovernmentDashboard",
  components: {
    LineChart,
    PieChart,
    agePieChart,
  },
  data() {
    return {
      sexPieData: null,
      agePieData: null,
      numberLineData: null,
      chartHeight: "400px", // 统一图表高度
      quickItems: [
        {
          id: 1,
          icon: "sjhj.png",
          title: "数据汇聚",
          permission: "system:list:list",
          description: "多源数据采集整合",
        },
        {
          id: 2,
          icon: "sjtj.png",
          title: "数据统计",
          permission: "system:statistics:list",
          description: "数据分析与可视化",
        },
        {
          id: 3,
          icon: "sjzl.png",
          title: "数据治理",
          permission:"system:list:list",
          description: "数据质量管控",
        },
        {
          id: 4,
          icon: "gxzy.png",
          title: "共享资源",
          permission:"system:list:export",
          description: "数据资源共享",
        },
        {
          id: 5,
          icon: "yyjk.png",
          title: "运营监控",
          permission:"monitor:operlog:list",
          description: "系统运行监测",
        },
        {
          id: 6,
          icon: "grzx.png",
          title: "个人中心",
          description: "账户与设置",
        },
      ],
      statsData: [
        {
          id: 1,
          icon: "el-icon-collection",
          title: "数据采集次数",
          value: "0",
          change: "12.5%",
          trend: "positive",
          trendIcon: "el-icon-top",
        },
        {
          id: 2,
          icon: "el-icon-cpu",
          title: "数据整合总量",
          value: "0",
          change: "3.2%",
          trend: "positive",
          trendIcon: "el-icon-top",
        },
        {
          id: 3,
          icon: "el-icon-cloudy",
          title: "数据导出频次",
          value: "0",
          change: "2.1%",
          trend: "negative",
          trendIcon: "el-icon-bottom",
        },
        {
          id: 4,
          icon: "el-icon-connection",
          title: "数据服务总量",
          value: "0",
          change: "8.7%",
          trend: "positive",
          trendIcon: "el-icon-top",
        },
      ],
      tableData: [
        {
          id: "1001",
          name: "政务服务事项数据",
          platform: "政务平台A",
          updateTime: "2023-05-15 14:30",
          status: "正常",
        },
        {
          id: "1002",
          name: "行政审批流程数据",
          platform: "政务平台B",
          updateTime: "2023-05-15 13:45",
          status: "处理中",
        },
        {
          id: "1003",
          name: "公共资源交易数据",
          platform: "政务平台C",
          updateTime: "2023-05-15 11:20",
          status: "正常",
        },
        {
          id: "1004",
          name: "社会保障服务数据",
          platform: "政务平台D",
          updateTime: "2023-05-15 09:10",
          status: "异常",
        },
        {
          id: "1005",
          name: "民生诉求反馈数据",
          platform: "政务平台A",
          updateTime: "2023-05-14 17:30",
          status: "正常",
        },
      ],
    };
  },
  computed: {
    // 过滤有权限的快速访问项
    filteredQuickItems() {
      const permissions = this.$store.getters.permissions || [];
      const roles = this.$store?.getters?.roles || [];
      return this.quickItems.filter((item) => {
        // 如果没有设置权限，默认显示
        if (!item.permission) return true;
        if(roles.includes('admin')) return true;
        // 使用若依的权限检查方法
        console.log("this.$hasPermi",permissions,permissions.includes(item.permission))
        return permissions.includes(item.permission);
      });
    },
  },
  created() {
    this.handleAllData();
    this.dataStatisticsSummary();
    this.calculateChartHeight();
    window.addEventListener("resize", this.calculateChartHeight);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.calculateChartHeight);
  },
  methods: {
    dataStatisticsSummary() {
      dataStatisticsSummary().then((response) => {
        console.log("response", response.data);
        this.statsData[0].value = response.data.totalImportCount;
        this.statsData[1].value = response.data.totalImportItemCount;
        this.statsData[2].value = response.data.totalExportCount;
        this.statsData[3].value = response.data.totalExportItemCount;
        this.tableData = response.data.recentLogs;
      });
    },
    handleAllData() {
      homePage().then((response) => {
        // console.log("response", response.data);
        this.sexPieData = response.data.part1;
        this.agePieData = response.data.part2;
        this.numberLineData = response.data.part3;
      });
    },
    // 动态计算图表高度
    calculateChartHeight() {
      const windowHeight = window.innerHeight;
      // 根据窗口高度动态调整图表高度
      if (windowHeight < 768) {
        this.chartHeight = "300px";
      } else if (windowHeight < 1024) {
        this.chartHeight = "350px";
      } else {
        this.chartHeight = "400px";
      }
    },
    // 获取图片URL
    getImageUrl(iconName) {
      if (!iconName) return "";
      try {
        return require(`@/assets/index/${iconName}`);
      } catch (e) {
        console.warn(`图片加载失败: ${iconName}`, e);
        return "";
      }
    },
    handleQuickClick(value) {
      // this.$message.success(value);
      let url = null;
      switch (value) {
        case '数据汇聚':
          url = "/sjcj/shcj";
          break;
        case '数据统计':
          url = "/sjtj/statistics";
          break;
        case '数据治理':
          url = "/sjdb";
          break;
        case '共享资源':
          url = "/sjdcml/sjdc";
          break;
        case '运营监控':
          url = "/system/log/operlog";
          break;
        case '个人中心':
          url = "/user/profile";
          break;
      }
      this.$router.push(url);
    },
    handleView(row) {
      this.$message.info(`查看数据：${row.name}`);
    },
    getStatusType(status) {
      const statusMap = {
        正常: "success",
        处理中: "warning",
        异常: "danger",
      };
      return statusMap[status] || "info";
    },
  },
};
</script>

<style scoped>
.government-dashboard {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 0 20px;
}

.dashboard-main {
  margin: 0 auto;
  padding: 20px 20px 20px 0;
}

/* 快速访问区域样式 */
.quick-access {
  margin-bottom: 30px;
}

.quick-item {
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.03);
}

.quick-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
}

.quick-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

.quick-icon {
  width: 60px;
  height: 60px;
  margin-bottom: 15px;
  border-radius: 50%;
  display: inline-block;
  transition: all 0.3s ease;
  object-fit: contain;
}

.quick-item:hover .quick-icon {
  transform: scale(1.1);
}

.quick-item h3 {
  font-size: 16px;
  font-weight: 500;
  color: #162b4d;
  margin-bottom: 5px;
}

.quick-item p {
  font-size: 12px;
  color: #888;
  margin: 0;
}

/* 统计卡片样式 */
.stats-container {
  margin-bottom: 30px;
}

.stat-card {
  border-radius: 8px;
  padding: 20px;
  border: 1px solid rgba(0, 0, 0, 0.03);
  position: relative;
  overflow: hidden;
}

.stat-content {
  position: relative;
  z-index: 1;
}

.stat-icon-bg {
  position: absolute;
  right: 20px;
  top: 20px;
  opacity: 0.1;
  font-size: 60px;
  color: #1a56a7;
}

.stat-content h3 {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
  font-weight: 400;
}

.stat-value {
  font-size: 28px;
  font-weight: 500;
  margin-bottom: 15px;
  color: #162b4d;
}

.stat-change {
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.stat-change.positive {
  color: #27ae60;
}

.stat-change.negative {
  color: #eb5757;
}

/* 图表区域样式 - 重要修复 */
.dashboard-section {
  margin-bottom: 30px;
}

.chart-card {
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.03);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.chart-header {
  font-size: 16px;
  font-weight: 500;
  color: #162b4d;
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #e6e6e6;
  background: #fafafa;
}

.chart-header i {
  margin-right: 10px;
  color: #1a56a7;
}

.chart-container {
  flex: 1;
  min-height: 400px;
  padding: 0;
  position: relative;
}

/* 确保ECharts容器正确显示 */
::v-deep .chart {
  width: 100% !important;
  height: 100% !important;
}

.chart-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #909399;
  font-size: 14px;
}

.chart-loading .el-icon-loading {
  font-size: 32px;
  margin-bottom: 10px;
}

/* 数据表格样式 */
.data-table {
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.03);
  margin-bottom: 30px;
}

.table-header {
  font-size: 16px;
  font-weight: 500;
  color: #162b4d;
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #e6e6e6;
  background: #fafafa;
}

.table-header i {
  margin-right: 10px;
  color: #1a56a7;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .dashboard-main {
    padding: 15px;
  }

  .chart-container {
    min-height: 350px;
  }
}

@media (max-width: 768px) {
  .government-dashboard {
    padding: 0 10px;
  }

  .dashboard-main {
    padding: 10px;
  }

  .quick-access .el-col {
    margin-bottom: 15px;
  }

  .stats-container .el-col {
    margin-bottom: 15px;
  }

  .chart-container {
    min-height: 300px;
  }

  .chart-header {
    padding: 12px 16px;
  }
}

@media (max-width: 480px) {
  .chart-container {
    min-height: 250px;
  }
}

/* 确保卡片内容正确布局 */
::v-deep .el-card__body {
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>